﻿@page "/components/avatar"

<PageHeader Title="Avatar 头像">
    用图标、图片、字符的形式展示用户或事物信息
</PageHeader>

<Example Title="头像类型">
    <Description>头像提供了 3 种不同类型的头像：图标头像、图片头像、字符头像</Description>
    <RunContent>
        <Space Gap="24px">
            <SpaceItem>
                <Avatar Url="avatar.jpg"/>
            </SpaceItem>
            <SpaceItem>
                <Avatar Icon="@IconName.User"/>
            </SpaceItem>
            <SpaceItem>
                <Avatar>W</Avatar>
            </SpaceItem>
        </Space>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<Avatar Url=""avatar.jpg""/>

<Avatar Icon=""@IconName.User""/>

<Avatar>W</Avatar>
```
")
    </CodeContent>
</Example>
<Example Title="头像形状">
    <Description></Description>
    <RunContent>
        <Space Gap="24px">
            <SpaceItem>
                <Avatar Shape="Shape.Round">王</Avatar>
            </SpaceItem>
            <SpaceItem>
                <Avatar Shape="Shape.Circle">周</Avatar>
            </SpaceItem>
        </Space>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<Avatar Shape=""Shape.Round"">王</Avatar>

<Avatar Shape=""Shape.Circle"">周</Avatar>
```
")
    </CodeContent>
</Example>

<Example Title="头像尺寸">
    <Description></Description>
    <RunContent>
        <Avatar Size="Size.Small">W</Avatar>
        <Avatar Size="Size.Medium">W</Avatar>
        <Avatar Size="Size.Large">W</Avatar>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<Avatar Size=""Size.Small"">W</Avatar>
<Avatar Size=""Size.Medium"">W</Avatar>
<Avatar Size=""Size.Large"">W</Avatar>
```
")
    </CodeContent>
</Example>
<Example Title="组合头像">
    <Description>使用 <code>AvatarGroup</code> 来组合内部的 <code>Avatar</code> 组件。</Description>
    <RunContent>
        <AvatarGroup>
            <Avatar Url="avatar.jpg"/>
            <Avatar Icon="IconName.User"/>
            <Avatar>W</Avatar>
        </AvatarGroup>
        <br/>

        <AvatarGroup Size="Size.Large">
            <Avatar Url="avatar.jpg" />
            <Avatar Icon="IconName.User" />
            <Avatar>W</Avatar>
        </AvatarGroup>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<AvatarGroup>
    <Avatar Url=""avatar.jpg""/>
    <Avatar Icon=""IconName.User""/>
    <Avatar>W</Avatar>
</AvatarGroup>

<AvatarGroup Size=""Size.Large"">
    <Avatar Url=""avatar.jpg"" />
    <Avatar Icon=""IconName.User"" />
    <Avatar>W</Avatar>
</AvatarGroup>
```
")
    </CodeContent>
</Example>
<Example Title="组合头像的偏移方向">
    <Description>设置 <code>Left</code> 则改变头像组的偏移方向</Description>
    <RunContent>
        <AvatarGroup>
            <Avatar Url="avatar.jpg" />
            <Avatar Icon="IconName.User" />
            <Avatar>W</Avatar>
        </AvatarGroup>
        <br />
        <AvatarGroup Left>
            <Avatar Url="avatar.jpg" />
            <Avatar Icon="IconName.User" />
            <Avatar>W</Avatar>
        </AvatarGroup>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<AvatarGroup>
    <Avatar Url=""avatar.jpg""/>
    <Avatar Icon=""IconName.User""/>
    <Avatar>W</Avatar>
</AvatarGroup>

<AvatarGroup Left>
    <Avatar Url=""avatar.jpg""/>
    <Avatar Icon=""IconName.User""/>
    <Avatar>W</Avatar>
</AvatarGroup>
```
")
    </CodeContent>
</Example>